在第一篇文章有說到：

React的運作
把整個畫面拆成一個個元件（Component）來建構，再把它們組合起來變成完整的頁面，更有效率且維護地建造互動式網頁介面

這篇文章主要介紹 Component 的功能

Component（元件）是 React 用來建立使用者介面的基本單位

• 可重複使用：同一個元件可以在不同地方呼叫、使用
• 模組化：將UI拆解成各個小部分，增加程式碼的可讀性
• 可維護性高：每個元件只處理自己的邏輯與畫面，方便修改和除錯

Component種類

Class Component（類別元件）

• 使用 class 語法，功能完整但冗長需要
• render() 方法回傳 UI
  （這裡不特別去做討論）

Function Component（函式元件）

• 使用 JavaScript 函式定義、語法簡單
• React 16.8 之後結合 Hook，取代原本大部分 Class Component 的功能

例如：

function MyComponent() {
  return <h1>Hello World</h1>;
}

總結

React 團隊建議新專案優先使用 Function Component 搭配 Hook，因為它語法更簡單，也能取代大多數 Class Component 的需求

Hook：自定義Hook

讓使用者能在 Function Component 裡面使用 state（狀態）或是 lifecycle（生命週期）功能，也讓程式碼更容易拆分以及重複使用

使用條件

1. 只能在 Function Component 或自定義 Hook 中使用
2. 必須在最上層呼叫
3. 以 use 開頭命名
   例如：useState、useEffect、useHistory 等等

Lifecycle：元件的生命週期

主要階段

1. Mounting（掛載）：元件被建立並插入到網頁DOM 中的過程，React會將元件渲染到畫面上
2. Updating（更新）：當元件的state 或 props 改變時，React會重新渲染，並更新最新資料在畫面上
3. Unmounting（卸載）：元件從DOM被移除的階段，React會移除元件並從畫面上消失

在Function Component裡，主要用 useEffect 這個 Hook 來處理

結論

在 React 中，Component 是 UI 的基本組成單位

• 讓介面能重複利用、模組化、更容易維護
• React 最開始以 Class Component 為架構，但隨著 Hook 的出現，大部分的情況都能用 Function Component 完成
• 元件的生命週期是 React 的核心運作模式，在 Function Component 中主要透過 Hook 來處理